<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <p>过滤器：格式化数据，通常用于金额、时间等</p>
    <p>使用过滤器的步骤：1.注册过滤器（局部、全局）2.通过管道符调用（可以传参,第一个参数固定，就是要处理的数据，第二个参数是在调用时传入的）3.可以串联使用,过滤器的第一个参数就是上一个环节处理后的结果</p>
    <p>价格1：{{price | formatMoney(3)}}</p>
    <p>价格2：{{price | fMoney}}</p>
    <p>价格3：{{price | formatMoney(2) | fMoney}}</p>
    <hr>
    <p>格式化时间</p>
    <p>时间戳对应的年：{{time | getTime('yyyy')}}</p>
    <p>时间戳对应的月：{{time | getTime('mm')}}</p>
    <p>时间戳对应的日：{{time | getTime('dd')}}</p>
  </div>
  <script src="../vue.js"></script>
  <script>
    // 全局注册，在实例之前，在实例之外
    Vue.filter('fMoney', val => {
      return val+'元'
    })
    let vm = new Vue({
      el: '#app',
      data: {
        price: 8848,
        time: 1635927932659
      },
      // 局部注册
      filters: {
        formatMoney(val, num) {
          return `￥${val.toFixed(num)}`
        },
        getTime(val, type) {
          let date = new Date(val);
          if(type === 'yyyy') {
            return date.getFullYear()
          }else if(type === 'mm') {
            return date.getMonth() + 1
          }else if(type === 'dd') {
            return date.getDate()
          }
        }
      }
    })
  </script>
</body>
</html>